import React, { useEffect, useState } from 'react'
import { getList, getXz, getXq, getBj, getSs, getOrder, getZf, getZt } from '../../../axios/use'
import { Space, Table, Tag } from 'antd';
import { Button, message, Popconfirm, Modal, Drawer } from 'antd';
import { Checkbox, Form, Input } from 'antd';
const Index = () => {
    const [list, setList] = useState([])
    async function getlist() {
        const res = await getList()
        setList(res.rows)
        console.log(res);

    }
    useEffect(() => {
        getlist()
    }, [])

    const columns = [
        {
            title: 'id',
            dataIndex: 'id',
            key: 'id',
            render: text => <a>{text}</a>,
        },
        {
            title: '文章',
            dataIndex: 'title',
            key: 'title',
        },
        {
            title: '评论',
            dataIndex: 'content',
            key: 'content',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <a onClick={() => bj(record)}>编辑</a>
                    <Popconfirm
                        title="Delete the task"
                        description="Are you sure to delete this task?"
                        onConfirm={() => confirm(record.id)}
                        onCancel={cancel}
                        okText="Yes"
                        cancelText="No"
                    >
                        <Button danger>删除</Button>
                    </Popconfirm>
                    <a onClick={() => xq(record.id)}>详情</a>
                </Space>
            ),
        },
    ];
    //删除
    const confirm = (id) => {
        const adel = list.filter((item) => item.id != id)
        setList(adel)
        message.success('Click on Yes');
    };
    const cancel = e => {
        console.log(e);
        message.error('Click on No');
    };
    //新增|编辑
    const [title, setTitle] = useState('')
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [xzform] = Form.useForm()
    const handleOk = () => {
        setIsModalOpen(false);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    const xz = () => {
        setIsModalOpen(true);
        setTitle('新增数据')
        xzform.resetFields()
    }
    const bj = (record) => {
        setTitle('编辑数据')
        setIsModalOpen(true)
        xzform.setFieldsValue(record)
    }
    const onFinish = async (values) => {
        console.log('Success:', values);
        if (title === '新增数据') {
            const data = {
                "id": values.id,
                "title": values.title,//文章标题
                "content": values.content,//文章内容
                "tagList": ["HTTP"],//标签  array[string]
                "categoryList": ["HTTP"],//分类  array[string]
                "authorId": 47529555//用户id 暂时写死47529555 登陆成功后返回的用户信息
            }
            const res = await getXz(data)
            getlist()
            setList(res)
            setIsModalOpen(false)
            console.log(res);
        } else if (title === '编辑数据') {
            const data1 = {
                "id": values.id,
                "title": values.title,//文章标题
                "content": values.content,//文章内容
                "tagList": ["HTTP"],//标签  array[string]
                "categoryList": ["HTTP"],//分类  array[string]
                "authorId": 47529555//用户id 暂时写死47529555 登陆成功后返回的用户信息
            }
            const res = await getBj(data1)
            getlist()
            setList(res)
            setIsModalOpen(false)
        }

    };
    const onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
    };
    //搜索
    const onFinishs = async (values) => {
        console.log('Success:', values);
        const res = await getSs(values.title)

        setList(res.rows)

    };
    const onFinishFaileds = errorInfo => {
        console.log('Failed:', errorInfo);
    };
    //详情
    const [open, setOpen] = useState(false);
    const [xqlist, setXqlist] = useState([])
    const onClose = () => {
        setOpen(false);
    };
    const xq = async (id) => {
        setOpen(true);
        setTitle('详情')
        const res = await getXq({ id })
        setXqlist(res)
        getorder()
    }
    //创建订单
    const [order, setOrder] = useState([])
    const getorder = async () => {
        const data2 = {
            "price": 9.99,// 订单价格  99.99
            "subject": "解锁文章"// 商品描述 解锁文章
        }
        const res = await getOrder(data2)
        setOrder(res.data)

    }
    const zf = async () => {
        const data3 = {
            "orderNo": order.orderId,//订单id
            "totalPrice": 9.99,//价格
            "subject": "解锁文章" //支付描述
        }
        const res = await getZf(data3)
        if (res.code === 200) {
            window.open(res.url, '_blank')
        }
        getzt()
        console.log(res);
    }
    const getzt = async () => {
        const data = {
            "out_trade_no": order.orderId //商品id
        }
        const res = await getZt(data)
        console.log(res);
    }
    const [flag, setFlag] = useState(false);
    const hf = () => {
        setFlag(!flag)
    }
    const tj = async () => {
        // 这里添加提交回复的逻辑
        console.log('提交回复');
        setFlag(false); // 提交后隐藏回复框
    }
    return (
        <div>
            <Button onClick={xz}>+发布文章</Button>
            <Drawer
                title={title}
                closable={{ 'aria-label': 'Close Button' }}
                onClose={onClose}
                open={open}
            >
                <div>
                    <p>用户：{xqlist.id}</p>
                    <p>评论：{xqlist.title}</p>
                    <span style={{ color: '#00f' }} onClick={hf}>{flag ? '收起回复' : '回复'}</span>
                    {flag && (
                        <div>
                            <Input.TextArea rows={1} placeholder="请输入回复内容" />
                            <Button onClick={tj}>提交回复</Button>
                        </div>
                    )}
                </div>
                <div><Button onClick={zf}>去支付文章9.99</Button></div>
            </Drawer>
            <Modal
                title={title}
                closable={{ 'aria-label': 'Custom Close Button' }}
                open={isModalOpen}
                onOk={handleOk}
                onCancel={handleCancel}
            >
                <Form
                    form={xzform}
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    style={{ maxWidth: 600 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        label="title"
                        name="title"
                        rules={[{ required: true, message: 'Please input your username!' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="id"
                        name="id"
                        rules={[{ required: true, message: 'Please input your username!' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="content"
                        name="content"
                        rules={[{ required: true, message: 'Please input your password!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item label={null}>
                        <Button type="primary" htmlType="submit">
                            确定
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
            <Form
                name="basic"
                layout='inline'

                style={{ maxWidth: 1600, float: 'right' }}
                initialValues={{ remember: true }}
                onFinish={onFinishs}
                onFinishFailed={onFinishFaileds}
                autoComplete="off"
            >
                <Form.Item
                    label="文章"
                    name="title"
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="评论"
                    name="content"
                >
                    <Input />
                </Form.Item>

                <Form.Item label={null}>
                    <Button type="primary" htmlType="submit">
                        搜索
                    </Button>
                </Form.Item>
            </Form>
            <Table rowKey='id' columns={columns} dataSource={list}
                pagination={{
                    total: list.length,
                    showSizeChanger: true,
                    showQuickJumper: true,
                    defaultPageSize: 3,
                    showTotal: total => `Total ${total} items`
                }}
            />
        </div>
    )
}

export default Index
